<template>
	<view class="my-settle-container">
		<!-- 全选区域 -->
		<label @click="changeAllChecked" class="radio">
			<radio color="#C00000" :checked="isAllChecked"></radio>
			<text>全选</text>
		</label>
		
		<!-- 合计区域 -->
		<view class="amount-box">
			合计：<text class="amount">{{ totalGoodsPrice }}</text>
		</view>
		
		<!-- 结算按钮区域 -->
		<view	@click="settlement" class="btn-settle">结算({{ checkedCount }})</view>
	</view>
</template>

<script>
	import { mapState,mapMutations,mapGetters } from 'vuex'
	
	export default {
		methods: {
			...mapMutations('user',['updateRedirect']),
			...mapMutations('cart',['updateGoodsChecked']),
			delayNavigate(){			// 延时导航到 my 页面
				this.seconds = 3
				this.showTips(this.seconds)
				this.timerId = setInterval(()=>{
					this.seconds--
					if(this.seconds <= 0){
						clearInterval(this.timerId)
						// 跳转到 my 页面
						uni.switchTab({
							url: '/pages/my/my',
							success: () => {
								this.updateRedirect({
									openType: 'switchTab',
									from: '/pages/cart/cart'		// 指定将来返回的页面路径
								})
							}
						})
						return
					}
					this.showTips(this.seconds)
				},1000)
			},
			async payOrder(){						// 实现订单支付功能
				// 1.创建订单
				// 1.1 组织订单对象数据
				const orderObj = {
					order_price: this.totalGoodsPrice,
					consignee_addr: this.addstr,
					goods: this.cartList.filter(g => g.goods_state).map(g => ({
						goods_id: g.goods_id,
						goods_number: g.goods_count,
						goods_price: g.goods_price,
					}))
				}
				// 1.2 发起请求创建订单
				const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create',orderObj)
				if(res.meta.status !== 200){
					return uni.$showMsg('创建订单失败')
				}
				// 1.3 得到服务器响应的“订单编号”
				const orderNumber = res.message.order_number
				console.log(orderNumber)
				
				// 2.实现订单预支付功能
				// 2.1 发送请求获取订单的支付信息
				const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{
					order_number: orderNumber
				})
				// 2.2 校验是否生成订单预支付数据成功
				if(res2.meta.status !== 200){
					return uni.$showMsg('订单预支付生成失败')
				}
				// 2.3 得到订单支付相关的必要参数
				const payInfo = res2.message.pay
				console.log(payInfo)
				
				// 3.发起微信支付
				// 3.1 调用 uni.requestPayment() 发送微信支付
				uni.requestPayment({
					nonceStr: payInfo.nonceStr,
					package: payInfo.package,
					paySign: payInfo.paySign,
					signType: payInfo.signType,
					timeStamp: payInfo.timeStamp,
					success: async (res) => {
						// 3.3 完成了支付，进一步查询支付的结果
						const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder',{ order_number: orderNumber })
						// 3.4 检测到订单未支付
						if(res3.meta.status !== 200){
							return uni.$showMsg('订单未支付')
						}
						// 3.5 检测到订单支付完成
						uni.showToast({
							title: '订单支付成功',
							icon: 'success'
						})
					},
					fail: (err) => {
						// 3.2 校验是否存在错误
						return uni.$showMsg('订单未支付')
					}
				})
			},
			settlement(){					// 处理结算按钮的处理函数
				// 校验是否选择购买的商品
				if(!this.checkedCount){
					return uni.$showMsg('请选择结算的商品')
				}
				// 校验是否选择收货地址
				if(JSON.stringify(this.address) === '{}'){
					return uni.$showMsg('请选择收货地址')
				}
				// 校验用户是否登录
				if(!this.token){
					return this.delayNavigate()
				}
				
				// 实现订单支付功能
				this.payOrder()
			},
			changeAllChecked(){		// 处理全选的处理函数
				this.updateGoodsChecked(!this.isAllChecked)
			},
			showTips(n){					// 展示消息提示的方法
				uni.showToast({
					icon: 'none',
					title: '请登录后再结算！' + n +'秒后自动跳转到登录页',
					mask: true,
					duration: 1500
				})
			}
		},
		computed: {
			...mapState('cart',['cartList']),
			...mapState('user',['token','address']),
			...mapGetters('user',['addstr']),
			...mapGetters('cart',['totalGoodsPrice','checkedCount','totalGoodsCount']),
			isAllChecked(){		// 处理是否全选
				return this.checkedCount === this.totalGoodsCount
			}
		},
		data() {
			return {
				seconds: 3,			// 实现消息提示的倒计时的秒数
			}
		},
		name:"my-settle"
	}
</script>

<style lang="scss">
.my-settle-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
	height: 50px;
	font-size: 14px;
	padding-left: 5px;
	
	.radio {
		display: flex;
		align-items: center;
	}
	
	.amount-box {
		.amount {
			color: #C00000;
		}
	}
	
	.btn-settle {
		min-width: 160px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-color: #C00000;
		color: #fff;
	}
}
</style>